<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <#include "/comm/module-edit.ftl"/>
</head>

<body>
<div class="layui-div-body">
    <div class="layui-fluid  layui-div-edit" style="height: 90vh">
        <div class="layui-row" style="height: 100%;overflow:hidden">
            <div class="layui-col-sm4" style="max-height: 100%;overflow-y: auto">
                <div class="layui-card-header">
                    权限列表
                </div>
                <div id="ID-tree-demo" style="max-height: 100%;"></div>
            </div>

            <div class="layui-col-sm8" style="padding-left: 40px;">
                <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <label class="layui-form-label">编码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="prCode" lay-verify="required"
                                   placeholder="请输入编码" class="layui-input" lay-reqtext="请填写编码"
                                   value="${info.prCode!}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="prName" lay-verify="required"
                                   placeholder="请输入名称" class="layui-input" lay-reqtext="请填写名称"
                                   value="${info.prName!}">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                    <textarea name="prRemark" placeholder="请输入内容"
                              class="layui-textarea">${map.prRemark!}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="hidden" id="_id" name="_id" value="${info._id}"/>
                            <input type="hidden" id="_ids" name="_ids" value=""/>
                            <div class="layui-footer" style="left: 0;">
                                <button class="layui-btn" lay-submit="" lay-filter="save">立即提交
                                </button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use("edit", function () {
        var tree = layui.tree;
        let edit = layui.edit;
        edit.render(function (obj) {
            var checkedData = tree.getChecked('demo-id-1'); // 获取选中节点的数据
            var idString = getCheckedIdsAsString(checkedData);
            obj["_ids"] = idString;
            save(obj)
        });
        // 渲染
        let obj = JSON.parse('${map.dataThree!}');
        tree.render({
            elem: '#ID-tree-demo',
            data: Object.values(obj),
            showCheckbox: true,  // 是否显示复选框
            onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
            id: 'demo-id-1'
        });

// 定义递归函数生成逗号分隔的 ID 字符串
        function getCheckedIdsAsString(data) {
            let ids = '';
            data.forEach(item => {
                // 拼接当前节点 ID
                ids += (ids ? ',' : '') + item.id;
                // 递归处理子节点（需判断 children 是否存在）
                if (item.children && item.children.length > 0) {
                    const childIds = getCheckedIdsAsString(item.children);
                    if (childIds) ids += ',' + childIds;
                }
            });
            return ids;
        }
    });
</script>
</body>

</html>